<template>
	<view>
		<view style="margin-top: 30rpx;">
			 <u-swiper
			    :list="list1"
				keyName="image"
				showTitle bgColor="#ffffff"
				imgMode="scaleToFill"
				circular
				indicator
				indicatorMode="line"
				height='320'
				previousMargin="60"
				nextMargin="60"
			    radius="1"         
			></u-swiper>
		</view>
				
		<view style="margin-top: 65rpx;">
			<view class="title">最新通知</view>
			
			<view style="padding: 20px 0px 0px 0px ;min-height: 345px;">
				<u-grid
						:border="false"
						col="1"
				>
					<u-grid-item
							v-for="i in noticeList"
							:key="i.id"
					>
						<view class="item" @click="goNotice(i.id)">
							<view class="imgBk" style="height: 105px;" :style="{backgroundImage: 'url(' + i.image + ')'}">
							</view>
							<view class="itemContent" style="height: 65px;">
								<view class="line2" style="height: 40px;">{{i.title}}</view>
								<view style="float: right;font-size: 14px;margin-top: 6px;color: darkorange;">
									{{i.createTime}}
								</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		
		<view style="margin-top: 40rpx;">
			<view class="title">热门活动</view>
			
			<view style="padding: 20px 10px 10px 10px ;min-height: 345px;">
				<u-grid
						:border="false"
						col="2"
				>
					<u-grid-item
							v-for="i in activityList"
							:key="i.eventId"
					>
						<view class="item" @click="goActivityDetail(i.eventId)">
							<view class="imgBk" :style="{backgroundImage: 'url(' + i.eventImgUrl + ')'}">
								
							</view>
							<view class="itemContent">
								<view style="font-size: 12px;font-weight: 200;color: darkorange;">{{i.startTime}}~{{i.endTime}}</view>
								<view class="line1" style="font-size: 12px;font-weight: 600;margin-bottom: 2px;">{{i.title}}</view>
								<view class="line2" style="font-size: 12px;font-weight: 200;height: 32px;">{{i.description}}</view>
								<view v-if="i.status == '已通过'" style="font-size: 12px;font-weight: 200;color: green">{{i.status}}</view>
								<view v-if="i.status == '报名中'" style="font-size: 12px;font-weight: 200;color: purple">{{i.status}}</view>
								<view v-if="i.status == '已结束'" style="font-size: 12px;font-weight: 200;color: red">{{i.status}}</view>
								<view v-if="i.status == '进行中'" style="font-size: 12px;font-weight: 200;color: blue">{{i.status}}</view>
								<view v-if="i.status == '未通过'" style="font-size: 12px;font-weight: 200;color: aqua">{{i.status}}</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		
		<view style="margin-top: 20rpx;">
			<view class="title">热门团队</view>
			
			<view style="padding: 20px 0px 0px 0px ;min-height: 300px;">
				<u-grid
						:border="false"
						col="1"
				>
					<u-grid-item
							v-for="i in teamList"
							:key="i.teamId"
					>
						<view class="item" @click="goTeamDetail(i.teamId)">
							<u-row>
								<u-col span="4">
									<view style="padding: 10px;">
										<view class="itemTeamBk" :style="{backgroundImage: 'url(' + i.avatar + ')'}">
										</view>
									</view>
								</u-col>
								<u-col span="8">
									<view>
										<view class="line1" style="font-weight: 600;font-size: 16px;margin-bottom: 14px;">{{i.teamName}}</view>
										<view class="line1" style="font-weight: 300;font-size: 14px">{{i.aim}}</view>
									</view>
								</u-col>
							</u-row>
							
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<tab-bar :currentPage="0"></tab-bar>
	</view>
	
</template>

<script>
import list from 'uview-ui/libs/config/props/list'
import { getActivityApi, getNoticeApi, getTeamApi } from '../../../utils/homePage'
	export default {
		data() {
			return {
				list1: [],
				activityList: [],
				noticeList: [],
				teamList: [],
			}
		},
		methods: {
			change(){
				
			},
			clickImg(){
				
			},
			goNotice(id){
				uni.navigateTo({
					url:`/pages/view/homepage/noticeDetail?id=${id}`
				})
			},
			goActivityDetail(id){
				// console.log(id)
				uni.navigateTo({
					url:`/pages/view/activity/activityDetail?id=${id}`
				})
			},
			goTeamDetail(id){
				uni.navigateTo({
					url:`/pages/view/team/teamDetail?id=${id}`
				})
			},
			formatDate(time){
			  let nyr = time.slice(0, 10)
			  let sfm = time.slice(11,19)
		
			  let newTime = nyr + ' ' + sfm
		
			  return newTime;
			},
			formatDate2(time){
				return time.slice(0, 10)
			}
		},
		onShow() {
			let that = this
			getActivityApi('','').then(res => {
				if(res.code == 0){
					that.activityList = res.data.slice(0,4)
					that.activityList.forEach(e => {
						e.startTime = that.formatDate2(e.startTime)
						e.endTime = that.formatDate2(e.endTime)
					})
					that.activityList.forEach(e => {
						that.list1.push({
							image: e.eventImgUrl,
							title: e.title
						})
						
					})
				}
			})
			let noticeQueryVo = {
				current: 1,
				pageSize: 2,
			}
			getNoticeApi(noticeQueryVo).then(res => {
				if(res.code == 0){
					that.noticeList = res.data.records
					that.noticeList.forEach(e=> {
						e.createTime = that.formatDate(e.createTime)
					})
				}
			})
			let teamQueryVo = {
				current: 1,
				pageSize: 2,
			}
			getTeamApi(teamQueryVo).then(res => {
				if(res.code == 0){
					that.teamList = res.data.records
				}
			})
		}
	}
</script>

<style scoped>
.title{
	font-weight: 700;
	font-size: 40rpx;
	margin-left: 10px;
}
.imgBk{
	width: 100%;height: 80px;
	background-size: 100% 100%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.item{
	width: 100%;margin: 0 auto;width: 87%;margin-bottom: 20px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
	border-radius: 7px;
}
.itemContent{
	padding: 6px;
	height: 80px;
}
.itemTeamBk{
	width: 70px;
	height: 70px;
	border-radius: 7px;
	background-size: 100% 100%;
}
.line1{
	display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}
.line2{
	display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}
</style>
